iT邦幫忙

2021 iThome 鐵人賽

DAY 18
1
自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列 第 18

第 18 集:Bootstrap 客製化 Sass 必備知識(上)

  • 分享至 

  • xImage
  •  

此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。

編譯

scss 註解有分為 會被編譯不會被編譯 兩種。

寫法://

// 不會被編譯到 css 檔案中

寫法:/**/

/* 會被編譯到 css 檔案中 */

變數

幾乎全部自定義樣式所需要的變數都由 _variable.scss 作為基底。

!default

  • 透過 重新賦值 的特性,將尚未重新被賦予新值的變數,保留預設值的設置。

預設值(若沒有設置其它顏色,則會是黑色)

$paragraph-color : blue;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

因此在 _variable.scss 檔案中大部分變數結尾都有加上 !default,使開發者進行客製化時,能更方便覆蓋原有的變數。

唯一例外情況:

  • 變數前的值是 null 則不會被覆蓋。
$paragraph-color : null;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

命名

  • 開頭主要會由元件、標籤名稱所組成,或是用途名稱。(ex:$paragraph-margin-bottom$btn-padding-y
  • 比較看不懂的可以直接用全域搜尋變數名稱,可以看到使用的程式碼,在嘗試比對看看編譯出來 css 樣式,大概就可以暸解它的用途。

命名空間 (Namespaces)

簡化開頭相同的 css 樣式。

舉例 border

// 原本
.box {
  border: 1px solid #000;
  border-radius: 10%;
  border-color: blue;
}

// 簡化
.box {
  border: 1px solid {
    radius: 10%;
    color: blue;
  }
}

sass 內建函式

sass 提供蠻多好用的函式,簡單介紹幾個常用的。

通用

type-of:返回目標類型。

  • 語法:type-of(目標)
type-of(#000); // color;
type-of("Kent"); // string;

zip:合併多個陣列(每個陣列長度必須一致,否則會 編譯失敗

  • 語法:zip(陣列, 陣列, ...)
zip(1 2, 3 4) //((1 2), (3 4))
zip(1, 4) // (1, 4)

append:新增資料到陣列中

  • 語法:append(目標陣列, 參數)
append: (1px 2px, 3px); // 1px 2px 3px
append((), "Kent"); // (Kent) 將型態轉為陣列

字串操作

針對字串操作的函式。

str-length:返回字串長度。

  • 語法:str-length(目標字串)
str-length("Kent"); // 回傳 4

str-index:返回索引值。(搜尋字串中第一次出現的位置,沒搜尋到 則會回傳 null

  • 語法:str-index(目標字串, 要搜尋的字)
str-index("Kent", "K"); // 回傳 1

str-slice:返回擷取後的字串。(從 1 開始,若省略第三個參數則會預設擷取到字串最後)

  • 語法:str-slice(目標字串, 起始位置, 結束位置)
str-slice("Kent", 1 ,3); // 回傳 Ken
str-slice("Kent", 2); // 回傳 ent

陣列操作

針對陣列操作的函式,索引值從 1 開始。

length:返回陣列長度。

  • 語法:length(目標陣列)
$color: (#000 #fff #111)
length($color) //3
length(1px 2px 3px) //3

index:返回索引值。(搜尋陣列中第一次出現的索引值,沒搜尋到 則會回傳 null

$color: (#000 #fff #111)
length($color, #000) //1
length(1px 2px 3px, 3px) //3

nth:返回該索引的值。(獲取陣列中對應位置的值,沒搜尋到 則會編譯錯誤。)

$color: (#000 #fff #111)
length($color, 1) //#000
length(1px 2px 3px, 3) //3px

map 操作

針對 map 型態操作的函式。

map-get:返回取的值
map-has-key:返回布林值。(搜尋 map 中 key 值是否存在)
map-keys:返回陣列。(由所有 key 值所組成)
map-values:返回陣列。(由所有 value 值所組成)
map-remove:刪除 map 指定的 key 資料。(若 key 不存在 map 中,則會回傳和之前一樣的 map)
map-merge:合併兩個 map。

$font-sizes: (
  "1": 1rem,
  "2": 2rem,
  "3": 3rem
);

map-get($font-sizes, "2"); // 2rem
map-has-key($font-sizes, "2"); // true
map-keys($font-sizes) // ("1", "2", "3")
map-values($font-sizes) // (1rem 2rem 3rem)

map-remove($font-size, "3"); //("1": 1rem, "2": 2rem)

map-merge($font-sizes, (
  "4": 4rem,
  "5": 5rem
)); 
//("1": 1rem, "2": 2rem, "4": 4rem, "5": 5rem)

想了解更內建函式請參考官方文件:Built-In Modules


連接符號

-_ 符號

  • 對於 scss 宣告 變數名稱函式名稱 時是相同的。

變數範例

$banner_title: 87px;

.banner {
  font-size: $banner-title;
}

覆蓋特性

$banner-title: 87px;
$banner_title: 987px;

.banner {
  font-size: $banner-title;
}

函式範例

@function mix_color($color1, $color2) {
  @return mix($color1, $color2);
}
.text-color {
  color: mix-color(#010203, #040506);
}

⚠️ 注意

  • 只有在 變數名稱函式名稱 使用上才是相同,如果是 樣式名稱 就不同了。

& 符號,用於連接的父層撰寫巢狀結構(類似 BEM 命名結構)

.banner {
  &-title {
    font-size: 3rem;
  }
  &-color {
    color: red;
  }
}

編譯後的 css

.banner-title {
  font-size: 3rem;
}
.banner-color {
  color: red;
}

巢狀結構真的寫過都說讚,寫到後面根本無法離開。

想了解更多符號請參考官方文件:Style Rules


下一集將介紹資料型態、運算符號、插補。


上一篇
第 17 集:Bootstrap 客製化 Sass 官網資源
下一篇
第 19 集:Bootstrap 客製化 Sass 必備知識(下)
系列文
30 天轉生到 bootstrap 5 的意識界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言